<template>
  <div class="container">
    <div class="vTitle"><span>文件列表</span></div>
    <div class="imgList">
      <div class="item" v-for="(item, index) in data.list" :key="index">
        <dl>
          <dt>
            <img :src="item.url" alt="" />
          </dt>
          <dd>{{ item.original_name }}</dd>
        </dl>
      </div>
    </div>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-count="data.totalPage"
        :page-sizes="[10, 20, 50, 100]"
        v-model:current-page="data.currentPage"
        @change="changePage"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { getFileList } from "@/api/index";
const data = reactive({});
data.totalPage = 1;
data.pageSize = 14;
data.currentPage = 1;
const getList = () => {
  data.list = [];
  getFileList({
    currentPage: data.currentPage,
    pageSize: data.pageSize,
  }).then((res) => {
    if (res.code == 200) {
      data.list = res.data;
      data.totalPage = res.pagination.totalPage;
      console.log(data);
    }
  });
};
const changePage = () => {
  getList();
};
onMounted(() => {
  getList();
});
const setScale = (isTrue) => {
  const targetDPR = isTrue ? 1 : 2;
  const scale = 1 / targetDPR;

  // 动态写入 meta 标签
  const viewportMeta = document.createElement("meta");
  viewportMeta.name = "viewport";
  viewportMeta.content = `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, user-scalable=no`;
  document.head.appendChild(viewportMeta);
};
</script>

<style lang="less" scoped>
.container {
  flex-grow: 1;
  overflow-y: auto;
}
.imgList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-left: var(--bs-border-color) 1px solid;
  border-top: var(--bs-border-color) 1px solid;
  .item {
    padding: 20px;
    border-right: var(--bs-border-color) 1px solid;
    border-bottom: var(--bs-border-color) 1px solid;
  }
}
.page {
  display: flex;
  flex-direction: row-reverse;
  padding-top: 24px;
}
</style>